<template>
    <div class="ci-container">
        <div class="company">
            <h3>公司介绍</h3>
            <div class="text">
                <img src="../../../assets/images/AboutUS/company.png" alt="">
                <p>北京中研硕福科技有限公司是国家级高新技术企业，国内领先的产业数据智能服务商，构建数据智能驱动、“一体两翼”的业务架构，通过认知升级和数字再造，为政府、园区、高校和企业提供“线上+线下”“咨询+实施”的产业促进和数字化转型解决方案。
                </p>
            </div>
        </div>
        <div class="ywjg">
            <h3>业务架构</h3>
            <p>面向政府、高校、园区和企业，提供数智产品、数据服务、咨询研究“一体两翼”产业数据智能服务。</p>
            <img src="../../../assets/images/AboutUS/ywjg.png" alt="">
        </div>
        <div class="ryzz">
            <h3>资质荣誉</h3>
            <div class="list">
                <div class="item">
                    <img src="../../../assets/images/AboutUS/ryzz1.png" alt="">
                    <img src="../../../assets/images/AboutUS/ryzz2.png" alt="">
                    <img src="../../../assets/images/AboutUS/ryzz3.png" alt="">
                </div>
            </div>
            <h4>合作伙伴</h4>
            <img src="../../../assets/images/AboutUS/ryzz5.png" alt="">
        </div>
        <div class="sjzy">
            <h3>资源数据</h3>
            <p>公司积累千万级产业经济、教育、人才、科技创新等数据，与国家部委和专业机构建立数据资源合作关系</p>
            <div class="list">
                <div class="item">
                    <h3>16,000W+</h3>
                    <p>企业大数据</p>
                    <img src="../../../assets/images/AboutUS/sjzy1.png" alt="">
                </div>
                <div class="item">
                    <h3>1200W+</h3>
                    <p>教育大数据</p>
                    <img src="../../../assets/images/AboutUS/sjzy2.png" alt="">
                </div>
                <div class="item">
                    <h3>5000W+</h3>
                    <p>人才大数据</p>
                    <img src="../../../assets/images/AboutUS/sjzy3.png" alt="">
                </div>
                <div class="item">
                    <h3>2700W+</h3>
                    <p>科技大数据</p>
                    <img src="../../../assets/images/AboutUS/sjzy4.png" alt="">
                </div>
            </div>
        </div>
        <div class="jssl">
            <h3>技术实力</h3>
            <p>公司已经取得了28项计算机软件著作权登记证书，已经获批北京市新技术新产品证书和国家高新技术企业。</p>
            <img src="../../../assets/images/AboutUS/jssl.png" alt="">
        </div>
        <div class="khhb">
            <h3>客户伙伴</h3>
            <p>公司与工信部、商务部等国家部委，太原、九江、珠海、洛阳等多地政府，开发区（产业园区）、高等院校、知名企业达成长期紧密合作关系</p>
            <img src="../../../assets/images/AboutUS/khhb.png" alt="">
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue"

</script>

<style lang="less" scoped>
.ci-container {
    .company {
        background: #fff;
        padding: 20px 60px;

        h3 {
            font-size: 30px;
            color: #4A4A4A;
            text-align: center;
        }

        .text {
            display: flex;
            padding: 20px;

            img {
                width: 350px;
                margin-right: 40px;
            }

            p {
                font-size: 20px;
                color: #4A4A4A;
                line-height: 62px;
            }
        }
    }

    .ywjg {
        background: #EBEFF5;
        text-align: center;
        padding: 20px;

        h3 {
            font-size: 30px;
            color: #2E2E2E;
        }

        p {
            font-size: 16px;
            color: #2E2E2E;
            margin-top: 20px;
        }

        img {
            width: 600px;
            margin-top: 10px;
        }
    }

    .ryzz {
        background: #fff;
        text-align: center;
        padding: 20px;

        h3 {
            font-size: 30px;
            color: #2E2E2E;
        }

        .list {
            .item {
                img {
                    width: 400px;
                }
            }
        }

        h4 {
            position: relative;
            font-weight: 400;
            font-size: 20px;
            color: #414141;
        }

        h4::before {
            content: "";
            display: block;
            width: 350px;
            height: 1px;
            background-color: #D1D1D1;
            position: absolute;
            top: 50%;
            left: 200px;
        }

        h4::after {
            content: "";
            display: block;
            width: 350px;
            height: 1px;
            background-color: #D1D1D1;
            position: absolute;
            top: 50%;
            right: 200px;
        }

        img {
            width: 1200px;
            margin-top: 20px;
        }
    }

    .sjzy {
        background: #EBEFF5;
        text-align: center;
        padding: 20px;

        h3 {
            font-size: 30px;
            color: #2E2E2E;
        }

        p {
            font-size: 16px;
            color: #2E2E2E;
            margin-top: 20px;
        }

        .list {
            display: flex;
            padding: 0 100px;
            margin-top: 20px;

            .item {
                flex: 1;
                margin: 20px;
                box-shadow: 0 0 15px rgba(0, 0, 0, .1);
                padding: 20px;
                padding-bottom: 0;
                position: relative;

                h3 {
                    font-size: 25px;
                    color: #303030;
                    text-align: left;

                }

                p {
                    text-align: left;
                }

                img {
                    margin-left: 100px;
                    width: 100px;
                }
            }
        }
    }

    .jssl {
        background: #fff;
        text-align: center;
        padding: 20px;

        h3 {
            font-size: 30px;
            color: #2E2E2E;
        }

        p {
            font-size: 16px;
            color: #2E2E2E;
            margin-top: 20px;
        }

        img {
            width: 1200px;
        }
    }

    .khhb {
        background: #EBEFF5;
        text-align: center;
        padding: 20px;

        h3 {
            font-size: 30px;
            color: #2E2E2E;
        }

        p {
            font-size: 16px;
            color: #2E2E2E;
            margin-top: 20px;
        }

        img {
            width: 1200px;
        }
    }
}
</style>